<template>
  <div>
    <div class="masking">
        <div class="part-top">
            <div class="btn-close" @click="closePoster">
              <img src="../assets/img/close.png" crossorigin="Anonymous">
            </div>
        </div>
        <canvas id="canvasShow" width="548px" height="892px" v-show="false"></canvas>
        <img :src="posterDataUrl" class="canvas-img"/>
        <div class="share-main">
          <template v-if="isShowShare">
            <span class="share-text twinkling">请长按图片保存发送至朋友圈</span>
            <img  class="share-img joggle" src="../assets/img/jtl.png" />
          </template>
        </div>
        <div class="friend-join" v-if="isShowfriendJoin">
            <img  class="join-img joggle-top" src="http://cdn2.u.imugeda.com/c/jbaf/9jrb/images/jtl_3.png" />
            <p class="join-text">点击右上角分享</p>
        </div>
        <div class="btn-share" @click="showShare"></div>
        <div class="btn-friend-join" @click="ShowfriendJoin"></div>
    </div>
  </div>
</template>

<script>
import Chart from 'chart.js'
import { api } from '@/axios/api/index.js'
export default {
  props: ['pictures','greeting'],
    data(){
  		return{
          posterDataUrl:'',  
          count:'',
          isShowShare:false,
          isShowfriendJoin:false,
  		}
  	},
    mounted(){
      this.add()
    },
    methods: {
      async add(){
        let res= await api.add()
        this.count=res.obj.readNum || 0
        this.saveCanvas(null, (dataUrl) => {
                this.posterDataUrl = dataUrl
        })
      },
      saveCanvas (Spaces, callback) {
            // 获取Canvas对象(画布)
            let canvas = document.getElementById('canvasShow')
            // //简单地检测当前浏览器是否支持Canvas对象，以免在一些不支持html5的浏览器中提示语法错误
            if (canvas.getContext) {
                // 获取对应的CanvasRenderingContext2D对象(画笔)
                var ctx = canvas.getContext('2d')
                // 创建新的图片对象
                var canvasImg = new Image()
                // 指定图片的URL
                canvasImg.setAttribute("crossOrigin",'Anonymous')
                canvasImg.src = 'http://chengdubulbuls.oss-cn-chengdu.aliyuncs.com/%E6%88%90%E5%8D%8E%E9%9D%92%E5%B9%B4/view1.jpg'
                var canvasPic = new Image()
                // 第二张图片
                // 图片的转码链接
                // var baseurl = Config.proxy_img_base_url
                canvasPic.setAttribute("crossOrigin",'Anonymous')
                canvasPic.src = this.pictures
                var items = []
                var count = this.count
                var greeting =this.greeting
                items.push(canvasImg, canvasPic)
                // 定时判断图片是否加载完成
                let window_setThree = window.setInterval(function () {
                    // 图片是否全部加在完成的标志
                    let allReady = true
                    // 判断图片是否全部加在完成
                    for (let i = 0; i < items.length; i++) {
                        let image = items[i]
                        allReady = allReady && image.complete
                    }
                    if (allReady) {
                        clearInterval(window.clearInterval(window_setThree))
                        ctx.drawImage(canvasImg, 0, 0, 550, 895)
                        ctx.drawImage(canvasPic, 18, 111, 513, 605)


                        ctx.strokeStyle = "white";
                        ctx.lineWidth = 2;
                        ctx.strokeRect(18, 111, 513, 605);



                        ctx.textAlign="right";
                        ctx.fillStyle = 'rgba(41, 40, 40, 0.4)';
                        ctx.fillRect(18, 111, 513, 605);
                        ctx.fillStyle = '#fff'
                        // ctx.font = 'bold 32px Arial'
                        // ctx.fillText('我是', 520, 520)

                        ctx.fillStyle = '#FFC72A'
                        ctx.font = 'bold 32px 黑体'
                        ctx.fillText('我是第'+count+'名为成华青年点赞的人', 520, 690)
                        ctx.fillStyle = '#FFC72A'
                        ctx.font = 'bold 32px 黑体'
                        ctx.fillText(greeting, 520, 630)
                        ctx.fillStyle = '#fff'
                        // ctx.font = 'bold 24px Arial'
                        // ctx.fillText('我们一起期待成华的下一个30年!', 520, 690)
                        ctx.textAlign = 'center'
                        let canvasSrc = canvas.toDataURL('image/jpeg')
                        if (callback && callback instanceof Function) {
                            callback(canvasSrc)
                        }
                    }
                }, 50)
            }
        },
        closePoster(){
          this.$emit('closePoster')
        },
        showShare(){
          this.isShowfriendJoin=false
          this.isShowShare=true
        },
        ShowfriendJoin(){
          this.isShowShare=false
          this.isShowfriendJoin=true
        }
    }
}
</script>
<style scoped>
.masking {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  background: rgba(41, 40, 40, 0.8);
  z-index: 999;
}
.m-t-20{
  margin-top:20px;
}
.part-top{
  margin:10px 0;
}
.container {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.text{
  font-size:30px;
  font-family:PingFangSC-Semibold,PingFang SC;
  font-weight:bold;
  color:#fff;
  position:absolute;
  bottom:50px;
  right:5px;
  white-space: pre-wrap;
  text-align: right;
}
.text-bold{
  font-size:35px;
  font-weight:bold;
  color:#FFC72A;
}
.text-haight{
  font-size:45px;
  font-weight:bold;
  color:#FFC72A;
}
.btn-share{
  width: 105px;
  height: 30px;
  background: url(../assets/img/join.png) no-repeat center center;
	background-size: cover;
  border-radius: 10px;
  display: inline-block;
}
.btn-friend-join{
  width: 105px;
  height: 30px;
  background: url(../assets/img/share.png) no-repeat center center;
	background-size: cover;
  border-radius: 10px;
  display: inline-block;
  margin-left: 10px;
}
.btn-close img{
  width: 30px;
  height: 30px;
}
@keyframes loading {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.canvas-img{
  width:274px;
}
.share-main{
  position:relative;
  height:30px;
}
.share-text{
    font-size: 0.14rem;
    color: #fff;
    font-weight: bold;
}
.share-img{
  position: absolute;
  top: -30px;
  right: 20px;
  width:50px;
  height:50px;
}
.twinkling{
-webkit-animation: twinkling 1s infinite ease-out;
}
@-webkit-keyframes twinkling{
  0% {
        opacity: 0;
    }
    33% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes twinkling{
  0% {
        opacity: 0;
    }
    33% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
.joggle{
-webkit-animation: joggle 1.3s infinite ease-out;
}
@-webkit-keyframes joggle {
    0% {
      transform: scale(0.5);
    }
    30% {
      transform: scale(1.4);
    }
    50%{
        transform: rotate(3.5deg);
    }
    60%{
       -webkit-transform: rotate(-0.5deg);
    }
    70%{
        transform: rotate(3.5deg);
    }
    100%{
      transform: scale(1);
    }
  }
  @keyframes joggle {
    0% {
      transform: scale(0.5);
    }
    30% {
      transform: scale(1.4);
    }
    50%{
        transform: rotate(3.5deg);
    }
    60%{
       -webkit-transform: rotate(-0.5deg);
    }
    70%{
        transform: rotate(3.5deg);
    }
    100%{
      transform: scale(1);
    }
  }
  .join-text{
    font-size: 14px;
    color: #fff;
    font-weight: bold;
    padding-top:20px;
  }
  .friend-join{
    position: absolute;
    top: 10px;
    right: 10px;
  }
  .join-img{
    width:50px;
    height:50px;
  }
  .joggle-top{
     -webkit-animation: joggle-top 1.3s infinite ease-out;
  }
   @keyframes joggle-top {
    0% {
      transform: scale(0.5);
    }
    30% {
      transform: scale(1.4);
    }
    50%{
        transform: translate(1px, 1.4px) rotate(3.5deg);
    }
    60%{
       -webkit-transform:translate(-1.3px, -1px)  rotate(-0.5deg);
    }
    70%{
        transform:translate(1px, 1.4px) rotate(3.5deg);
    }
    100%{
      transform: scale(1);
    }
  }
</style>
